<template>
  <div>
    <el-row class="elrow">
      <el-col :span="4">
        <el-input v-model="queryParam.name" placeholder="请输入产品名称" style="margin-left: 20px" />
      </el-col>
      <el-col :span="10">
        <el-button type="primary" style="margin-left: 30px" @click="goAddProduct">新增</el-button>
        <el-button type="default" style="margin-left: 20px" @click="initProductList">查询</el-button>
        <el-button type="default" style="margin-left: 20px" @click="resetQuery">重置</el-button>
        <el-button type="default" style="margin-left: 20px" @click="exportExcel">导出</el-button></el-col>
    </el-row>
    <el-row class="elrow">
      <el-table :data="productListData" style="width: 85vw">
        <el-table-column type="index" label="序号" />
        <el-table-column label="介绍" prop="introUrl">
          <template slot-scope="scope">
            <img :src="scope.row.introUrl" width="60vw">
          </template>
        </el-table-column>
        <el-table-column prop="code" label="编码" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="description" label="备注" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="categoryName" label="产品类别" />
        <el-table-column prop="brandName" label="品牌" />
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editProduct(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteProduct(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="elrow">
      <el-pagination
        :current-page.sync="current"
        :page-size="size"
        :page-sizes="pageSizeOptins"
        layout="total, prev, pager, next, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import { getProductListPageApi } from "@/api/product/product";
import { exportExcelApi } from "@/api/product/brand";
export default {
  data() {
    return {
      current: 1,
      size: 10,
      total: 0,
      pageSizeOptins: [10, 20, 30, 40, 50],
      productListData: [],
      queryParam: {
        name: "",
      },
    };
  },
  mounted() {
    this.initProductList();
  },
  methods: {
    exportExcel() {
      exportExcelApi("product").then((res) => {
        const blob = new Blob([res], {
          type: "application/vnd.ms-excel",
        });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = "产品信息.xlsx"; // 设置下载的文件名
        link.click(); // 模拟点击下载

        // 释放掉blob URL，防止内存泄漏
        setTimeout(() => {
          window.URL.revokeObjectURL(url);
        }, 0);
      });
    },
    resetQuery() {
      this.queryParam = {
        name: "",
      };
      this.initProductList();
    },
    handleCurrentChange(c) {
      this.current = c;
      this.initProductList();
    },
    handleSizeChange(s) {
      this.size = s;
      this.current = 1;
      this.initProductList();
    },
    editProduct(p) {
      this.$router.push("/product/edit/" + p.id);
    },
    initProductList() {
      const params = {
        current: this.current,
        size: this.size,
        name: this.queryParam.name,
      };
      getProductListPageApi(params).then((res) => {
        if (res.code !== 200) {
          return this.$message.error("请求失败");
        }
        this.productListData = res.data.records;
        this.total = res.data.total;
      });
    },
    goAddProduct() {
      this.$router.push({
        path: "/product/product/add/0",
      });
    },
    goEditProduct(p) {
      this.$router.push({
        path: "/product/product/edit/" + p.id,
      });
    },
  },
};
</script>

<style scoped>
.elrow {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
